<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line1 flex-s">
          <el-button type="primary" @click="onOperation({}, 'add')"
            ><el-icon style="margin-right: 2px"><Plus /></el-icon
            >新建</el-button
          >
        </div>
      </div>
      <div class="content providerTable">
        <el-table
          ref="multipleTableRef"
          border
          :data="state.list"
          style="width: calc(100% - 20px)"
        >
          <el-table-column
            property="nicheng"
            label="名称"
            fixed
            align="center"
          />
          <el-table-column label="头像" align="center">
            <template #default="scope">
              <img
                v-if="scope.row.touxiang && scope.row.touxiang.length > 0"
                style="width: 100px; height: 100px; border-radius: 50%"
                :src="scope.row.touxiang[0].filePath"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            property="guanzhuliang"
            label="关注量"
            width="130"
            align="center"
          />
          <el-table-column
            property="dongtaishuliang"
            label="发布动态"
            width="130"
            align="center"
          />
          <el-table-column
            property="createTime"
            label="创建时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="300"
            align="center"
          >
            <template #default="scope">
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'edit')"
                >编辑</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'videoList')"
                >视频列表</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'deploy')"
                >发布</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'delete')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <h-page
          v-if="state.total"
          v-model:curr-page="state.params.current"
          :size="state.params.size"
          :total="state.total"
          @change="GetList"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetVirtualUserList, DeleteVirtualUser } from "@/api/virtualUser";
import { baseMsg, elMessageTip } from "@/utils/utils";

const route = useRoute();
const router = useRouter();
const state = reactive({
  params: {
    current: Number(route.query.page) || 1,
    size: Number(route.query.size) || 10,
  },
  list: [],
  total: 0,
});
// 查询虚拟用户列表
const GetList = () => {
  GetVirtualUserList(state.params).then((res) => {
    if (res.code == 4201) {
      state.list = res.data.records;
      state.total = res.data.total;
    }
  });
};
GetList();
// 操作
const onOperation = (params, operation) => {
  if (operation === "add" || operation === "edit") {
    router.push({
      path: `/xitongshezhi/xuniyonghu/info`,
      query: {
        type: operation,
        id: params.id || null
      },
    });
  }
  if (operation === "videoList") {
    router.push({
      path: "/xitongshezhi/xuniyonghu/videoList",
      query: {
        yhNo: params.yhNo
      }
    });
  }
  if (operation === "deploy") {
    router.push({
      path: "/xitongshezhi/xuniyonghu/videoList",
      query: {
        yhNo: params.yhNo,
        type: operation
      }
    });
  }
  if (operation === "delete") {
    elMessageTip({
      ok() {
        DeleteVirtualUser({
          id: params.id,
        }).then((res) => {
          if (res.code == 4202) {
            baseMsg("删除成功");
            GetList();
          }
        });
      },
    });
  }
};
watch(
  () => route.query,
  () => {
    state.params.current = Number(route.query.page) || 1;
    GetList();
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 10px solid #f2f2f2;
  border-radius: 10px 10px 0 0;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
  padding-bottom: 30px;
}
</style>
<style lang="scss">
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
